<template>
  <div>
    <div class="all_invite_box" v-if="inviteType === 'beInvited' && inviteContents.length">
      <div class="invite_box" v-for="(inviteCon, index) in inviteContents" :style="topVal(index)">
        <div class="beInvited">
          <div class="invite_text">
            <span class="invite_customer">{{inviteCon.userName}}</span>{{$t('webchat.inviteJoinMultipleConversations')}}
          </div>
          <div class="invite_btn">
            <el-button type="primary" class="refuse" size="small" @click=refusedGroupSession(inviteCon)>{{$t('public.refuse')}}</el-button>
            <el-button type="primary" class="accept" size="small" @click=acceptGroupSession(inviteCon)>{{$t('public.accept')}}</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="invited_box" v-if="inviteType === 'invite' && tabType">
      <div class="invited_people">
        <div class="invite_text">
          {{$t('webchat.inviteStatusInviting')}}<span class="invite_customer">{{inviteConData.userName}}</span>{{$t('webchat.joinMultipleConversations')}}
        </div>
        <div class="invite_btn">
          <el-button type="primary" class="refuse" size="small" @click=cancelGroupSession(inviteConData)>{{$t('public.cancel')}}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
  import bus from '@/store/eventBus'
  //  import * as types from '@/store/modules/webchat/mutation-types.js'
  export default({
    name: 'InviteConversation',
    data () {
      return {
      }
    },
    props: {
      inviteType: String,
      inviteContents: {
        type: Array,
        default: function () {
          return []
        }
      },
      inviteConData: {
        type: Object,
        default: function () {
          return {
            sessionId: '',
            sid: '',
            userName: ''
          }
        }
      }
    },
    computed: {
      tabType () {
        let arr = this.$route.path.split('/')
        if (arr.length > 4 && arr[3] === 'webchat_todo' && arr[4] === this.inviteConData.sessionId) {
          return true
        } else {
          return false
        }
      }
    },
    methods: {
      cancelGroupSession (data) {
        let self = this
        this.$store.dispatch('cancelGroupSession', {_id: data.sessionId, sid: data.sid}).then(() => {
          self.$emit('closeInvite', data)
//          this.$store.dispatch('changeInvite', {todo: 'delete', sessionId: data.sessionId})
//          self.$store.commit(types.SHOW_KICK_NOTIFY, false)
//          self.$store.commit(types.DELETE_INVITE_NOTIFY, {sessionId: data.sessionId})
        })
      },
      acceptGroupSession (data) {
        this.$store.dispatch('acceptGroupSession', {_id: data.sessionId, sid: data.sid, toPeer: data.toPeer}).then((response) => {
          if (response.success) {
            this.$store.dispatch('changeInvite', {todo: 'delete', sessionId: data.sessionId})
  //          self.$store.commit(types.SHOW_INVITE_NOTIFY, false)
            this.$router.push('/index/webchat/webchat_todo/' + data.sessionId + '/')
            let isLeaveMsg = data.isLeaveMsg ? true : false
            let type = 'grabWebchatSession'
            bus.$emit('initiatingWebchatFun', isLeaveMsg, type)
          } else {
            this.$store.dispatch('changeInvite', {todo: 'delete', sessionId: data.sessionId})
          }
        })
      },
      refusedGroupSession (data) {
//        let self = this
        this.$store.dispatch('refusedGroupSession', {_id: data.sessionId, sid: data.sid}).then(() => {
          this.$store.dispatch('changeInvite', {todo: 'delete', sessionId: data.sessionId})
//          self.$store.commit(types.SHOW_INVITE_NOTIFY, false)
        })
      },
      topVal (index) {
        let top = index * 160
        return 'top: ' + top + 'px'
      }
    }
  })
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .all_invite_box
    position absolute
    width 310px
    height auto
    right 0
    top 60px
  .invite_box
    background $cf-white
    position absolute
    width 300px
    height 150px
    border-radius 2px
    border 1px solid #D3DCE6
    padding 30px
    z-index 2000
    font-size 12px
    box-shadow 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04)
    right 4px
    top 4px
    box-sizing border-box
  .invited_box
    background $cf-white
    position absolute
    width 300px
    height 150px
    border-radius 2px
    border 1px solid #D3DCE6
    padding 30px
    z-index 2000
    font-size 12px
    box-shadow 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04)
    left 180px
    top 140px
    box-sizing border-box
  .refuse
    background $c-sub
    border 1px solid $c-sub
  .accept
    background $c-main
    bors(1px,$c-main)
  .invite_text
    font-size 18px
    text-align center
  .invite_btn
    text-align center
    margin-top 10px
    font-size 14px
    .refuse,.accept
      width 100px
      height 34px
      font-size 14px
</style>
